<template>
  <view class="indexmoreBox">
    <!-- 头部 -->
    <view class="indexmoretopbox">
      <view class="status-bar"></view>
      <view class="indexmoretop">
        <image src="../../static/indexmore/more_03.jpg" mode="" class="top-img" @click="toindex()"></image>
        <view class="top-center">
          <u-search :clearabled="false"></u-search>
        </view>
        <view class="top-right">
          . . .
        </view>
      </view>
    </view>
    <!-- 头部 -->
    <!-- 头部下方 -->
    <view class="">

    </view>
    <!-- 头部下方 -->
    <!-- 内容 -->
    <view class="indexmore-content">
      <!-- 左边导航栏 -->
      <view class="navleft">
        <view class="navbox" v-for="(item,i) in navlist" :key="i" @click="show = item.id">
          <view :class="show == item.id?'navitem1':'navitem'">
            {{item.tit}}
          </view>
        </view>
      </view>
      <!-- 左边导航栏 -->
      <!-- 右边内容 -->
      <view class="rightbox">
        <scroll-view scroll-y="true" class="scrollbox" scroll-with-animation @scroll="handscroll">
          <!-- 为您推荐 -->
          <view class="scroll-item" id="top" @click="handbacktop()">
            <view class="item-tit">
              为您推荐
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_23.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    一键绑卡
                  </view>
                </u-grid-item>
                <u-grid-item @click="tomoney()">
                  <image src="../../static/indexmore/moreimage_26.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    住房公积金
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_28.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    数字人民币
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_33.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子社保卡
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_34.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    黄金积存
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 为您推荐 -->
          <!-- 账号 -->
          <view class="scroll-item">
            <view class="item-tit">
              账户
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_37.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    转账汇总
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_38.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户明细查询
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_43.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    薪亨通
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 账号 -->
          <!-- 汇款转账 -->
          <view class="scroll-item">
            <view class="item-tit">
              汇款转账
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_37.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    转账汇总
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_38.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户明细查询
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_43.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    薪亨通
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 汇款转账 -->
          <!-- 财富 -->
          <view class="scroll-item">
            <view class="item-tit">
              财富
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_23.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    一键绑卡
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_26.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    住房公积金
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_28.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    数字人民币
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_33.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子社保卡
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_34.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    黄金积存
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 财富 -->
          <!-- 信用卡 -->
          <view class="scroll-item">
            <view class="item-tit">
              信用卡
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_37.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    转账汇总
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_38.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户明细查询
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_43.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    薪亨通
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 信用卡 -->
          <!-- 贷款服务 -->
          <view class="scroll-item">
            <view class="item-tit">
              贷款服务
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_37.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    转账汇总
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_38.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户明细查询
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_43.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    薪亨通
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 贷款服务 -->
          <!-- 生活服务-->
          <view class="scroll-item">
            <view class="item-tit">
              生活服务
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_37.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    转账汇总
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_38.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户明细查询
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_43.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    薪亨通
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 生活服务 -->
          <!-- 网点服务 -->
          <view class="scroll-item">
            <view class="item-tit">
              网点服务
            </view>
            <view class="item-cent">
              <u-grid :col="3">
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_37.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    转账汇总
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_38.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    账户明细查询
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_43.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    薪亨通
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_44.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    资信证明
                  </view>
                </u-grid-item>
                <u-grid-item>
                  <image src="../../static/indexmore/moreimage_45.jpg" mode="" class="ic-img"></image>
                  <view class="ic-text">
                    电子工资单
                  </view>
                </u-grid-item>
              </u-grid>
            </view>
          </view>
          <!-- 网点服务 -->

        </scroll-view>
      </view>
      <!-- 右边内容 -->
    </view>
    <!-- 内容 -->
  </view>
</template>
<script>
  export default {
    data() {
      return {
        scrollTop: 0,
        show: 1,
        navlist: [{
            id: 1,
            tit: '为您推荐'
          },
          {
            id: 2,
            tit: '账户'
          },
          {
            id: 3,
            tit: '转账汇款'
          },
          {
            id: 4,
            tit: '财富'
          },
          {
            id: 5,
            tit: '信用卡'
          },
          {
            id: 6,
            tit: '贷款服务'
          },
          {
            id: 7,
            tit: '生活服务'
          },
          {
            id: 8,
            tit: '网点服务'
          },
          {
            id: 9,
            tit: '助手'
          },
          {
            id: 10,
            tit: '其他'
          },
        ],
        topitem: '',
        scrollTop: ''
      }
    },
    methods: {
      handscroll(e) {
        let {
          scrollTop
        } = e.datail
        this.topitem = ""
      },
      handbacktop() {
        this.topitem = "top"
      },
      toindex() {
        uni.navigateBack({
          delta: 1
        })
      },
      tomoney() {
        uni.navigateTo({
          url: "/pages/index/money/money"
        })
      }
    }
  }
</script>

<style lang="scss">
  // 头部
  .indexmoretopbox {
    width: 100vw;
    background-color: white;
  }

  .status-bar {
    width: 100%;
    height: var(--status-bar-height);
  }

  .indexmoretop {
    width: 100vw;
    height: 100rpx;
    padding: 10rpx;
    display: flex;
    box-sizing: border-box;


    .top-img {
      margin-left: 20rpx;
      margin-top: 37rpx;
      width: 20rpx;
      height: 30rpx;
    }

    .top-center {
      margin-top: 16rpx;
      margin-left: 30rpx;
    }

    .top-right {
      margin-top: 20rpx;
      margin-left: 40rpx;
    }
  }

  // 头部
  // 内容
  .indexmore-content {
    display: flex;
    // margin-top: 100rpx;
    width: 100vw;
    height: 90vh;
    // background-color: bisque;

    // 左边导航栏
    .navleft {
      // background-color: yellowgreen;
      padding-left: 20rpx;
      // padding-top: 20rpx;
      padding-bottom: 20rpx;
      width: 30vw;
      box-sizing: border-box;
      font-size: 40rpx;

      .navitem {
        margin: 50rpx 0;
        font-size: 32rpx;
      }

      .navitem1 {
        font-weight: bold;
        color: #007AFF;
        margin: 50rpx 0;
        font-size: 32rpx;
      }
    }

    // 左边导航栏
    // 右边内容
    .rightbox {
      width: 70vw;
      // margin-top: 100rpx;

      .scrollbox {
        height: 100vh;
        // background-color: royalblue;

        .scroll-item {
          box-sizing: border-box;
          padding-top: 50rpx;
          padding-left: 10rpx;
          font-weight: bold;
          padding-right: 20rpx;

          .ic-img {
            margin-top: 20rpx;
            width: 60rpx;
            height: 50rpx;
          }

          .ic-text {
            margin-top: 10rpx;
            font-size: 24rpx;
          }
        }

        .item-tit {
          margin-bottom: 30rpx;
        }
      }
    }

    // 右边内容
  }

  // 内容
</style>